import React, { useEffect, useState } from 'react';
import {
  View,
  Image,
  Text
} from '@tarojs/components';
import Taro from '@tarojs/taro';
import './index.css';

const Navbar = (props) => {
  let {
    title
  } = props;

  const [system, setSyetem] = useState({});

  useEffect(() => {
    Taro.getSystemInfo({
      success: (res) => {
        setSyetem(res)
      }
    });
  }, [])

  const doBack = () => {
    props.onClick && props.onClick();
  }

  return (
    <View
      className='navbar-view'
    >
      <View
        style={{
          height: `${system?.statusBarHeight}px`
        }}
      ></View>
      <View
        className='navbar-view-main'
        style={{
          height: `${system?.titleBarHeight}px`
        }}
      >
        <Image
          source={{
            uri: 'https://jala-test-images.sndaurl.cn/images/back.png'
          }}
          className='navbar-view-icon'
          mode='aspectFill'
          onClick={()=>{doBack()}}
        />
        {title}
      </View>
    </View>
  );
}
export default Navbar;
